<template>
  <div class="container">
    <el-form
      ref="addFromRef"
      :model="addForm"
      :rules="$rules"
      label-width="120px"
      status-icon
      :disabled="isCheck"
      class="grid-flex"
    >
      <!-- #region 服务商 -->
      <el-form-item
        :label="$language.local('ServiceProviderName')"
        prop="ServiceProviderName"
      >
        <select-name
          v-model="addForm.ServiceProviderName"
          label-key="ServiceName"
          apiName="/api/Common/GetServiceProviderList"
          @change="serviceChange"
        ></select-name>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 收款银行 -->
      <el-form-item :label="$language.local('ServiceBank')" prop="ServiceBank">
        <select-name
          v-model="addForm.ServiceBank"
          label-key="BankName"
          :model="serviceBanks"
          @change="serviceBankChange"
        ></select-name>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 收款账号 -->
      <el-form-item
        :label="$language.local('ServiceAccountNo')"
        prop="ServiceAccountNo"
      >
        <xy-input
          v-model="addForm['ServiceAccountNo']"
          disabled
          class="service-account-no"
        ></xy-input>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 代付通道 -->
      <el-form-item
        :label="$language.local('PayChannelId')"
        prop="PayChannelId"
      >
        <select-id
          v-model="addForm['PayChannelId']"
          label-key="BankName"
          :model="payChannelList"
        ></select-id>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 客户名称 -->
      <el-form-item
        prop="CustomerName"
        :label="$language.local('CustomerName')"
      >
        <select-name
          v-model="addForm['CustomerName']"
          label-key="customerName"
          :apiName="`/api/Common/GetMerchantList?sid=${addForm._serviceproviderid}`"
          @change="midChange"
        ></select-name>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 充值费率 -->
      <el-form-item
        :label="$language.local('RechargeRate')"
        prop="RechargeRate"
      >
        <el-radio-group v-model="addForm['RechargeRate']">
          <el-radio :label="addForm.Rate"
            >起征点以下费率
            <b> {{ toFixed2(addForm.Rate) || "0.00" }}%</b></el-radio
          >
          <el-radio :label="2"
            >起征点以上费率
            <b> {{ toFixed2(addForm.QZDRate) || "0.00" }}% </b>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 服务费计算规则 -->
      <el-form-item :label="$language.local('ruleType')" prop="ruleType">
        <el-select v-model="addForm.ruleType" placeholder="请选择">
          <el-option
            v-for="item in ruleTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 充值金额 -->
      <el-form-item
        prop="RechargeAmount"
        :label="$language.local('RechargeAmount')"
      >
        <xy-input
          :disabled="!addForm['RechargeRate']"
          v-model="addForm['RechargeAmount']"
          class="service-account-no"
          @change="rechargeChange"
        ></xy-input>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 充值时间 -->
      <el-form-item
        prop="RechargeTime"
        :label="$language.local('RechargeTime')"
      >
        <select-date v-model="addForm.RechargeTime"></select-date>
      </el-form-item>
      <!-- #endregion -->

      <!-- #region 实发金额 -->
      <el-form-item
        prop="AccountAmount"
        :label="$language.local('AccountAmount')"
      >
        <xy-input
          :disabled="!addForm['RechargeRate']"
          v-model="addForm['AccountAmount']"
          class="service-account-no"
          @change="accountChange"
        ></xy-input>
      </el-form-item>
      <!-- #endregion -->

      <!-- #region 付款账户 -->
      <el-form-item
        prop="PayingAccountName"
        :label="$language.local('PayingAccountName')"
      >
        <xy-input
          disabled
          v-model="addForm['PayingAccountName']"
          clearable
        ></xy-input>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 付款银行 -->
      <el-form-item prop="PayingBank" :label="$language.local('PayingBank')">
        <xy-input disabled v-model="addForm['PayingBank']" clearable></xy-input>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 付款账户 -->
      <el-form-item
        prop="PayingAccount"
        :label="$language.local('PayingAccount')"
      >
        <xy-input
          disabled
          v-model="addForm['PayingAccount']"
          clearable
        ></xy-input>
      </el-form-item>
      <!-- #endregion -->
      <!-- #region 费用说明 -->
      <el-form-item prop="Note" :label="$language.local('Note')">
        <xy-input v-model="addForm['Note']" clearable></xy-input>
      </el-form-item>
      <!-- #endregion -->
    </el-form>
    <template v-if="/Check|Edit/i.test(api.action) == 'Check'">
      <el-form-item :label="$language.local('Check')" prop="Check">
        <el-radio-group v-model="addForm['Check']">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>

    <div class="form-footer mt3">
      <el-button @click="returnPre">返回</el-button>
      <el-button type="primary" @click="onSubmit('addFromRef')">确定</el-button>
    </div>
  </div>
</template>

<script>
import API from "../../plugins/api";
export default {
  props: {
    model: Object,
  },
  data() {
    return {
      addDialogVisible: false,
      addForm: {
        ServiceBankId: null,
        ServiceBank: "",
        ServiceAccountNo: "",
        BusinessOrderNo: "",
        refundStatus: null,
        refundLockStatus: null,
        Note: "",
        RecordType: "",
        CustomerNumber: "",
        CustomerName: "",
        AgentName: "",
        PayingBankName: "",
        customerReceiptUrl: "",
        SalesOf: "",
        ServiceProviderID: null,
        AddUser: "",
        CheckUser: "",
        CheckDate: "",
        PayChannelId: null,
        ServiceProviderName: "",
        RechargeAmount: null,
        RechargeTime: "",
        BankSerialNumber: "",
        PayingBank: "",
        PayingAccountName: "",
        PayingAccount: "",
        RechargeStatus: null,
        RechargeRate: null,
        AccountAmount: null,
        AccountingTime: "",
        ruleType: "",
        Indate: "2021-06-03T06:22:11.691Z",
        MID: null,
        Rate: "",
        QZDRate: "",
      },
      addFormItems: {
        // _serviceproviderid: null,
        ServiceProviderName: "服务商",
        ServiceBank: "收款银行",
        // ServiceBankId: null,
        ServiceAccountNo: "收款账号",
        PayChannelId: "代付通道",

        // MID: "客户",
        CustomerName: "客户名称",
        // _agentname: "客户名称",
        RechargeRate: "充值费率",
        ruleType: "服务费计算规则",
        RechargeAmount: "充值金额",
        // _rechargetime: "充值时间",
        AccountAmount: "实发金额",
        PayingAccountName: "付款户名",
        PayingBank: "付款银行",
        PayingAccount: "付款账户",
        Note: "string",
        RechargeStatus: "充值状态",
      },
      banks: [],
      api: new API("/api/recharge/Create"),
      isCheck: false,
      serviceBanks: [],
      payChannelList: [],
      ruleTypes: [
        {
          label: "充值金额 * 签约费率",
          value: "A",
        },
        {
          label: "充值金额 - 充值金额/(1+签约费率)",
          value: "B",
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  computed: {
    managerApi() {
      return `/api/Common/GetUserList?roleType=5&customerId=${this.addForm.SuperiorAgentID}`;
    },
  },
  methods: {
    async getData() {},

    async showAddDialog() {
      this.addDialogVisible = true;
    },

    async onEdit() {
      let response = await this.$http.post(this.api.edit, this.addForm);
      console.log(response);
    },
    async onEditById() {
      // this.addForm.employee.empName = this.addForm.empName;
      console.log(this.addForm);
      let api = this.api.edit + "/" + this.addForm.Id;
      console.log(api);
      let response = await this.$http.post(
        `${this.api.edit}/${this.addForm.Id}?mid=${this.addForm.MID}`,
        this.addForm
      );
      console.log(response);

      this.$router.go(-1);
    },
    async onCreate() {
      try {
        let response = await this.$http.post(this.api.create, this.addForm);
        console.log(response);
        this.$router.go(-1);
      } catch (error) {
        console.error(error);
        if (error.data) {
          this.$message.error(error.data.Message);
        } else {
          this.$message.error(error.data.Message);
        }
      }
    },
    onAudit: async function () {
      console.log(this.addForm);
      this.api.check = "Audit/";
      let response = await this.$http.post(
        `${this.api.check}${this.addForm.Id}?mid=${this.addForm.MID}`
      );
      console.log(response);
      this.$router.go(-1);
    },
    onChenk() {},
    async onSubmit(formName) {
      console.log(formName);
      console.dir(this.addForm);
      let valieded = await this.$refs[formName].validate();
      if (!valieded) {
        return;
      }
      console.log(this.api.action);
      switch (this.api.action) {
        case "EditById":
          this.onEditById();
          break;
        case "Check":
          this.onChenk();
          break;
        case "Audit":
          this.onAudit();
          break;
        case "Edit":
          this.onEdit();
          break;
        case "Create":
          this.onCreate();

          break;
        default:
          break;
      }
    },
    returnPre() {
      this.$router.go(-1);
    },
    selectManager(e) {
      console.log(e);
      this.addForm.customerManagerId = e.id;
    },
    agentChange(e) {
      console.log(e);
      this.addForm.MID = e.Id;
      this.addForm.PayingBank = e.SettlementBank;
      this.addForm.PayingAccount = e.SettlementAccount;
      this.addForm.PayingAccountName = e.AgentName;
      this.addForm.Rate = e.Rate;
      this.addForm.QZDRate = e.QZDRate;
      // this.addForm.SuperiorAgentName = e.AgentName;
    },
    serviceChange(e) {
      if (!e) {
        return;
      }
      // this.addForm.ServiceBank = e.BankName;
      this.addForm._serviceproviderid = e.Id;
      this.getServiceBanks();
    },
    serviceBankChange(e) {
      console.log(e);
      if (!e) {
        return;
      }
      this.addForm.ServiceBankId = e.BankId;
      this.addForm.ServiceAccountNo = e.AcctNo;
    },
    async getServiceBanks() {
      const id = this.addForm._serviceproviderid;
      if (!id) {
        return;
      }
      let response = await this.$http.get(
        `/api/recharge/GetServiceBank?sid=${id}`
      );
      // console.log(response);
      this.serviceBanks = response.data.Data.accountlist;

      this.payChannelList = response.data.Data.paychannellist;
    },
    async midChange(res) {
      if (!res) {
        return;
      }
      console.log(res);
      this.addForm.MID = res.Id;

      let response = await this.$http.get(
        `/api/recharge/GetMerchantBank?mid=${res.Id}&sid=${this.addForm._serviceproviderid}`
      );
      console.log(response);
      let payInfo = response.data.Data;
      this.addForm.PayingAccountName = payInfo[0].PayingAccountName;
      this.addForm.PayingBank = payInfo[0].PayingBankName;
      this.addForm.PayingAccount = payInfo[0].PayingAccount;
      this.addForm.Rate = payInfo[0].Rate;
      this.addForm.QZDRate = payInfo[0].QZDRate;

      this.addForm.ruleType = payInfo[0].Rule;
    },
    toFixed2(num) {
      if (!num) {
        return;
      }

      if (typeof num == "string") {
        num = Number(num);
      }
      return num.toFixed(2);
    },
    rechargeChange(value) {
      console.log(this.addForm.RechargeRate / 100);
      this.addForm.AccountAmount =
        value * (1 - this.addForm.RechargeRate / 100);
      console.log(this.addForm.AccountAmount);
    },
    accountChange(value) {
      this.addForm.RechargeAmount =
        value * (1 + this.addForm.RechargeRate / 100);
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-form {
  width: 100%;
  .el-form-item {
    width: 50%;
    padding-right: 1rem;
  }
}
</style>
